import React from "react";
import Grid from "@material-ui/core/Grid";
import IconButton from "@material-ui/core/IconButton";
import Fab from "@material-ui/core/Fab";
import AddIcon from "@material-ui/icons/Add";
import DeleteIcon from '@material-ui/icons/Delete';
import Button from "@material-ui/core/Button";
import Box from "@material-ui/core/Box";


import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";

// import SwipeableViews from "react-swipeable-views";
import { makeStyles, useTheme } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Typography from "@material-ui/core/Typography";

// import useService from "../service/useService";
import service from "../../service";

import GridForm from "../../components/GridForm";
import GridFormDialog from "../../components/GridFormDialog";

import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";

import { useAlertContext } from "../../contexts/AlertContext";
import {ProtoContext,ProtoProvider,useProtoContext} from "./context"


import _ from "lodash";

import {refreshProtos,protoTypes} from "./common"


const useStyles = makeStyles((theme) => ({
	displayFlex: {
		display: "flex",
	},
	displayFlexLeft: {
		display: "flex",
		justifyContent: "flex-start",
		alignItems: "center",
	},
	displayFlexRight: {
		display: "flex",
		justifyContent: "flex-end",
		flex: 1,
		alignItems: "center",
	},
	elementsRoot: {
		display: "flex",
		flexWrap: "wrap",
		// justifyContent: 'space-around',
		justifyContent: "flex-start",
		overflow: "hidden",
		backgroundColor: theme.palette.background.paper,
	},
	gridList: {
		width: 500,
		// minHeight: 300,
		alignContent: "flex-start",
	},
	listItemActive: {
		borderRadius: 3,
		boxShadow: "0px 3px 5px 2px rgba(255, 105, 135, .3)",
		// color: "red",
	},
	tab: {
		minWidth: "3em",
		width: "33.3%",
	},
}));


//property Tab
function TabPanel(props) {
	const { children, value, index, ...other } = props;

	return (
		<div role="tabpanel" hidden={value !== index} id={`wrapped-tabpanel-${index}`} aria-labelledby={`wrapped-tab-${index}`} {...other}>
			{value === index && (
				<Box p={1}>
					{children}
					{/* <Typography>{children}</Typography> */}
				</Box>
			)}
		</div>
	);
}

function a11yProps(index) {
	return {
		id: `simple-tab-${index}`,
		"aria-controls": `simple-tabpanel-${index}`,
	};
}
export default function Props(props) {
	const classes = useStyles();
	const [value, setValue] = React.useState(0);

	const handleChange = (event, newValue) => {
		setValue(newValue);
	};
	return (
		<div>
			<AppBar position="static" color="default">
				<Tabs value={value} indicatorColor="primary" textColor="primary" onChange={handleChange} centered>
					<Tab label="元素" {...a11yProps(0)} className={classes.tab} />
					<Tab label="数据" {...a11yProps(0)} className={classes.tab} />
					<Tab label="市场" {...a11yProps(0)} className={classes.tab} />
				</Tabs>
			</AppBar>
			<TabPanel value={value} index={0}>
				<ProtoInfo></ProtoInfo>
			</TabPanel>
			<TabPanel value={value} index={1}>
				<Fields field="Data"></Fields>
			</TabPanel>
			<TabPanel value={value} index={2}>
				<Fields field="Market"></Fields>
			</TabPanel>
		</div>
	);
}

function ProtoInfo(props) {
	const {setError} = useAlertContext()
	const { setProto, proto, protos, setProtos ,setActiveProtoId} = React.useContext(ProtoContext);
	var { Proto } = proto;
	if (!Proto) {
		return "";
	}

	const handlePropChange = (e) => {
		var k = e.target.name;
		var v = e.target.value;
		console.log(e.target.name, e.target.value);
		Proto[k] = v;
		var p = { ...proto };
		// p.Proto = Proto
		setProto(p);

		if (k == "Name") {
			var ps = [...protos];
			var i = _.findIndex(ps, (o) => o.Id == e.target.id);
			ps[i][k] = v;
		}
	};

	var fileds = [
		{ name: "Name", label: "Name", xs: 12, value: Proto.Name, inputProps: { id: Proto.Id } },
		{
			name: "Type",
			label: "Type",
			xs: 6,
			value: Proto.Type,
			disabled:true,
			inputProps: { id: Proto.Id, readOnly: true},
			type: "select",
			options: protoTypes,
		},
		{ name: "No", label: "No", xs: 6, value: Proto.No, inputProps: { id: Proto.Id } },
		{
			name: "Props",
			label: "Props",
			inputProps: { id: Proto.Id },
			value: JSON.stringify(Proto.Props),
			xs: 12,
			multiline: true,
			cols: 3,
		},
	];

	const handleDelete =async()=>{
		var {State,Message} = await service.graphElementProtos.delete(Proto.Id)
		if(State==0) {
			refreshProtos(setError,Proto.ClassId,setProtos,setActiveProtoId)
		}else {
			setError(Message)
		}
	}
	
	return (
		<Grid container>
			<Grid item xs={6}>
				<img src={Proto.Icon} style={{ width: 100 }}></img>
				<div>show icon</div>
			</Grid>

			<Grid item xs={6}></Grid>
			<Grid item xs={12}>
				<GridForm fields={fileds} onChange={handlePropChange}></GridForm>
			</Grid>
			<Grid item xs={12} style={{marginTop:"2em"}}>
				<Button onClick={handleDelete} variant="contained" color="secondary"  startIcon={<DeleteIcon />} fullWidth>
					Delete
				</Button>
			</Grid>
		</Grid>
	);
}


//property of proto
function Fields(props) {
	const {setError} = useAlertContext()
	const { setProto, proto, protos, setProtos ,setActiveProtoId} = React.useContext(ProtoContext);
	var { Proto } = proto;
	if (!Proto) {
		return "";
	}
	var fields = proto[props.field]
	return (
		<TableContainer>
			<Table aria-label="simple table">
				<TableHead>
					<TableRow>
						<TableCell align="left">
						<IconButton size="small" style={{padding:4,fontSize:"1em",position:"relative",left:"-1em"}}>
							<AddIcon fontSize="inherit" color="secondary" />
						</IconButton>
						No</TableCell>
						<TableCell align="left">属性名</TableCell>
						<TableCell align="left">类型</TableCell>
						<TableCell align="left"></TableCell>
					</TableRow>
				</TableHead>
				<TableBody>
					{fields &&
						fields.map((row, i) => (
							<TableRow key={row.Id}>
								<TableCell align="left">{i + 1}</TableCell>
								<TableCell align="left">{row.Key}</TableCell>
								<TableCell align="left">{row.Type}</TableCell>
							</TableRow>
						))}
				</TableBody>
			</Table>
		</TableContainer>
	);
}
